<!DOCTYPE html>
<html>

<head>
    <title>testD3_chp9_1.html</title>

    <script type="text/javascript" src="http://d3js.org/d3.v5.min.js">
    </script>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

</head>

<body>
    <svg width="960" height="600"></svg>
    <script>
        var marge = { top: 60, bottom: 60, left: 60, right: 60 }

        // 得到SVG画布
        var svg = d3.select("svg");//得到SVG画布
        var width = svg.attr("width");//得到画布的宽
        var height = svg.attr("height");//得到画布的长
        var g = svg.append("g")
            .attr("transform", "translate(" + marge.top + "," + marge.left + ")");


        var dataset = [10, 20, 30, 23, 13, 40, 27, 35, 20];


        // 分别在x方向和y方向绘制坐标轴
        var xScale = d3.scaleBand()
            .domain(d3.range(dataset.length))
            .rangeRound([0, width - marge.left - marge.right]);
        var xAxis = d3.axisBottom(xScale);

        var yScale = d3.scaleLinear()
            .domain([0, d3.max(dataset)])
            .range([height - marge.top - marge.bottom, 0]);
        var yAxis = d3.axisLeft(yScale);

        g.append("g")
            .attr("transform", "translate(" + 0 + "," + (height - marge.top - marge.bottom) + ")")
            .call(xAxis);
        g.append("g")
            .attr("transform", "translate(0,0)")
            .call(yAxis);

        //绘制矩形和文字
        var gs = g.selectAll(".rect")
            .data(dataset)
            .enter()
            .append("g");

        //绘制矩形
        var rectPadding = 20;//矩形之间的间隙
        gs.append("rect")
            .attr("x", function (d, i) {
                return xScale(i) + rectPadding / 2;
            })
            .attr("y", function (d) {
                return yScale(d);
            })
            .attr("width", function () {
                return xScale.step() - rectPadding;
            })
            .attr("height", function (d) {
                return height - marge.top - marge.bottom - yScale(d);
            })
            .attr("fill", "blue");
        //绘制文字
        gs.append("text")
            .attr("x", function (d, i) {
                return xScale(i) + rectPadding / 2;
            })
            .attr("y", function (d) {
                return yScale(d);
            })
            .attr("dx", function () {
                (xScale.step() - rectPadding) / 2;
            })
            .attr("dy", 20)
            .text(function (d) {
                return d;
            })
    </script>
</body>

</html>